import React from 'react';
import { useThemeStore } from '../../stores/themeStore';

const TailwindExample: React.FC = () => {
  const { mode } = useThemeStore();

  return (
    <div className={`p-6 rounded-lg backdrop-blur-md ${
      mode === 'dark' 
        ? 'bg-dark-card border border-dark-border' 
        : 'bg-light-card border border-light-border shadow-light-card'
    }`}>
      <h2 className={`text-xl font-bold mb-4 ${
        mode === 'dark' ? 'text-dark-text-primary' : 'text-light-text-primary'
      }`}>
        Tailwind CSS 示例组件
      </h2>
      
      <p className={`mb-4 ${
        mode === 'dark' ? 'text-dark-text-secondary' : 'text-light-text-secondary'
      }`}>
        这是一个使用 Tailwind CSS 构建的示例组件，展示了如何在深色和浅色主题之间切换。
      </p>
      
      <div className="flex gap-3">
        <button className={`
          px-4 py-2 rounded-md font-medium transition-all
          ${mode === 'dark' 
            ? 'bg-primary text-black hover:bg-primary/90' 
            : 'bg-primary-light text-white hover:bg-primary-light/90'
          }
        `}>
          主要按钮
        </button>
        
        <button className={`
          px-4 py-2 rounded-md font-medium transition-all border
          ${mode === 'dark' 
            ? 'bg-transparent text-white border-gray-600 hover:bg-white/10' 
            : 'bg-white text-gray-800 border-gray-300 hover:bg-gray-50 shadow-sm'
          }
        `}>
          次要按钮
        </button>
      </div>
    </div>
  );
};

export default TailwindExample;